<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>网易呀网易</title>
	<link rel="shortut icon"  href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="wangyi.css">

</head>
<body>
	<header class="header">
		<!--头部左边背景-->
		<div class="bgleft"></div>
		<!-- 头部右边链接 -->
		<div class="bgrihgt">
			<a href="#">了解更多</a>|
			<a href="#">反馈意见</a>
		</div>
	</header>

	<!-- 头部区域 -->
	<section class="content">
		<!-- 内容区域头-->
		<header class="content-tit">
		<h1>欢迎注册无线容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
		</header>

		<!-- 内容区体 -->
		<div class="body">
			<!--内容区左边-->
			<div class="bodyleft">
			<div class="regtabs">
				<ul>
					<li><a href="javascript:void (0)" style=" color: #fff;">注册字母邮箱</a></li>

					<li><a href="javascript:void (0)"  style="position:absolute; top:65px; left:195px;">注册手机号码邮箱</a></li>

					<li><a href="javascript:void (0)" style="position:absolute; top:65px; left:335px;">注册VIP邮箱</a></li>
				</ul>
			</div>

            <div class="regform">
            	<dl class="regform-item">
            		<dt class="regform-title">
            			<span class="tet-impt">*</span>邮件地址
            		</dt>
            		<dd class="regform-ct">
            			<input type="text" class="ipt">
            			<strong style="font-weight: bold; font-size: 14px;">@</strong>
            			<select>
            				<option selected="selected">163.com</option>
            			</select>
            			<div class="regform-tip">6~18个字符，可使用字母、数字、下划线，须以字母开头</div>
            		</dd>
            	</dl>

            	<dl class="regform-item">
            		<dt class="regform-title">
            			<span class="tet-impt">*</span>密码
            		</dt>
            		<dd class="regform-ct">
            			<input type="text" class="ipt" style="width: 322px;">
            			<div class="tip">6~18个字符，区分大小写</div>
            		</dd>
            	</dl>


            	<dl class="regform-item">
            		<dt class="regform-title">
           				<span class="tet-impt">*</span>邮件地址
					</dt>
					<dd class="regform-ct">
            			<input type="text" class="ipt" style="width: 322px;">
            			<div class="tip">6~18个字符，可使用字母、数字、下划线，须以字母开头</div>
            		</dd>
            	</dl>


            	<dl class="regform-item">
            		<dt class="regform-title">
           				<span class="tet-impt">*</span>手机号码
					</dt>
					<dd class="regform-ct">
            			<input id="phone" type="text" class="ipt" style="width: 286px;font-size: 14px; font-weight: bold; padding-left: 40px;" value="+86" color:#999;>


            			<div class="itlselect">
            				<a href="javascript:void (0)" class="flag-CN"><em></em>中国 +86</a>
            				<a href="javascript:void (0)" class="flag-Al"><em></em>阿尔巴尼亚(Shqiperia) +355</a>
            				<a href="javascript:void (0)" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
            				<a href="javascript:void (0)" class="flag-AF"><em></em>阿富汗(Republic of Afghanistan) +93</a>
            				<a href="javascript:void (0)" class="flag-AR"><em></em>阿根挺(Argentina) +54</a>
            			</div>

            			
            				<div class="itl-flag" style="position: absolute;
	width:30px;
	height:20px;
	
	cursor: default;
	
	 
	 top: 10px;">
            					<em style="display: inline-block;width: 16px;height:11px;background-image: url(flags.gif);float: left;margin-left:4px;margin-top: 6px;">&nbsp;</em>
            				</div>
            		


            			<div class="tip">忘记密码时，可以通过该手机号快速找回密码</div>
            		</dd>
            	</dl>

            	<dl class="regform-item">
            		<dt class="regform-title">
            			<span class="tet-impt">*</span>邮件地址
            		</dt>
            		<dd class="regform-ct">
            			<input type="text" class="ipt" style="width: 322px;">
            			<div class="tip">6~18个字符，可使用字母数字、下划线，须以字母开头</div>
            		</dd>
            	</dl>
            </div>
			</div>

            <!-- 内容右边区域 -->
            <div class="bodyright">
            	<img class="img1" src="reg_master.gif" alt="">
            </div>
		</div>
	</section>





	<script type="text/javascript">

		function itlselect(){
			//
			var links=document.querySelectorAll('.itlselect');
			var p=document.querySelector('.itl-flag');
			//

			//
			for (i=0; i<links.length;i++){

				links[i].addEventListener('click',function(e){
					var a=e.target;
					//
					var txt=a.innerText;

					//
					var cls=a.className;

					//

					//
					//
					var area=txt.substr(txt.indexOf("+"), txt.length - txt.indexOf("+"));
					//
					document.querySelector("#phone").setAttribute('value',  area);

					//
					
					p.className=cls;
				})
			}
		}

	

	    function switchflag(){
	    	var flag=document.querySelector('.itl-flag');
	    	    flag.addEventListener('click',function(e){
	    		/*是谁响应点击事件*/
	    		var d=e.target;
	    		var panel=document.querySelector('.itlselect');

	    		/*三元运算符。可以用if...else 代替*/
	    		panel.style.display==='none'? panel.style.display='block':panel.style.display='none';
	    	});
	    }



	    function seitchTab(){
	    	var tabs = document.querySelectorAll('.regtabs ul li a');
	    	console.log(tabs)
	    	var ul= document.querySelector('.regtabs ul');

	    	for(i=0;i<tabs.length;i++){

	    		tabs[i].index=i;
	    		tabs[i].addEventListener('click',function(e){
	    			var item=e.target;
	    			console.log(item.index);
	    			ul.style.backgroundPosition='0 -'+item.index*54+'px';

	    			for(i=0;i<tabs.length;i++){
	    				tabs[i].style.color="#000";

	    			}
	    			item.style.color="#fff";

	    		});
	    	}
	    }
        itlselect();
        switchflag();
        seitchTab();




	</script>















</body>
</html>